<template>
  <div class="app-container">
    <el-tabs v-model="queryParams.rdcType" class="tab-box" :class="{ disabled: disableAction }">
      <el-tab-pane label="集团检查" name="DEPT1" v-if="showBtns.jt" />
      <el-tab-pane label="集群检查" name="DEPT2" v-if="showBtns.jq" />
    </el-tabs>
    <el-form ref="queryForm" :model="queryParams" size="mini" inline :class="{ disabled: disableAction }" @submit.native.prevent>
      <el-form-item prop="businessType">
        <el-input v-model.trim="queryParams.businessType" placeholder="请输入检查类型" clearable @keyup.enter.native="handleQuery" style="width: 130px" />
      </el-form-item>
      <el-form-item prop="proName">
        <el-input v-model.trim="queryParams.proName" placeholder="请输入检查项目" clearable @keyup.enter.native="handleQuery" style="width: 130px" />
      </el-form-item>
      <!--
      <el-form-item prop="belongSystem">
        <el-select v-model="queryParams.belongSystem" placeholder="所属系统" clearable style="width: 130px">
          <el-option v-for="dict in dict.type.cq_pe_belong_system" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      -->
      <el-form-item style="margin-right: 30px">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="openSelectBusinessType" v-if="showBtns.add">新增</el-button> -->
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="list" size="small">
      <el-table-column label="检查类型" prop="businessType" show-overflow-tooltip min-width="100" />
      <el-table-column label="事业部" prop="deptName2" show-overflow-tooltip min-width="100" />
      <el-table-column label="城市公司" prop="deptName3" show-overflow-tooltip min-width="100" />
      <el-table-column label="检查项目" prop="displayName" show-overflow-tooltip min-width="200" />
      <el-table-column label="检查项数量" prop="chkitemNum" align="center" />
      <!--
      <el-table-column label="检查开始时间" prop="startTime" min-width="140" />
      <el-table-column label="检查结束时间" prop="latestTime" min-width="140" />
      -->
      <el-table-column label="创建人" prop="creatorName" />
      <el-table-column label="生成时间" prop="createTime" min-width="140" />
      <el-table-column label="单据状态" align="center" width="80">
        <el-tag slot-scope="{ row }" size="small" :type="row.proIsEnable ? 'success' : 'info'">{{ row.proIsEnable ? '正常' : '作废' }}</el-tag>
      </el-table-column>
      <el-table-column label="原因" prop="reason" show-overflow-tooltip min-width="100" />
      <el-table-column label="操作" align="center" width="130" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" icon="el-icon-view" @click="gotoRltChkitem(row)" v-if="showBtns.proInfo">查看</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-time" @click="$refs.EditTime.open(row)" v-if="showBtns.proEdit">修改</el-button> -->
          <el-button size="mini" type="text" icon="el-icon-delete" :loading="row.isEnableLoading" @click="toggleIsEnablePro(row)" v-if="row.proIsEnable && showBtns.proDisable">作废</el-button>
          <el-button size="mini" type="text" icon="el-icon-refresh-left" :loading="row.isEnableLoading" @click="toggleIsEnablePro(row)" v-else-if="!row.proIsEnable && showBtns.proEnable">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <SelectBusinessType ref="SelectBusinessType" @ok="onSelectBusinessType" />
    <ChkProWizard ref="ChkProWizard" @ok="getList" />
    <EditTime ref="EditTime" v-model="showEditTime" @ok="getList" />
  </div>
</template>
<script>
// 项目检查-检查项目列表
import auth from '@/plugins/auth'
import { CQ_EVAL_RDC_TYPE as RDC_TYPE } from '@/utils/baseData'
import { listPePro, enableRltPro, disableRltPro } from '@/api/cqPe/peRecord'
import SelectBusinessType from './components/SelectBusinessType'
import ChkProWizard from './components/ChkProWizard'
import EditTime from './components/EditPeRltProTime'
import { rdcTypeAuthMap, firAssToBelongSysMap } from './components/common'
export default {
  name: 'PeRltProject',
  components: { SelectBusinessType, ChkProWizard, EditTime },
  dicts: ['cq_pe_belong_system'],
  data() {
    return {
      listLoading: false,
      total: 0,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        rdcType: '',
        businessType: '',
        proName: '',
        belongSystem: ''
      },
      firAss: '', // gc, ds
      showEditTime: false,
      peRecordId: ''
    }
  },
  computed: {
    disableAction() {
      return this.listLoading
    },
    showBtns() {
      // 操作按钮权限
      const firAss = this.firAss
      const rdcType = rdcTypeAuthMap[this.queryParams.rdcType] || ''
      const permCode = `cqPe:peRecord:${firAss}:${rdcType}`

      const add = auth.hasPermi(`${permCode}:add`)
      const info = auth.hasPermi(`${permCode}:info`)
      const proInfo = auth.hasPermi(`${permCode}:project:info`)
      const proEdit = auth.hasPermi(`${permCode}:project:edit`)
      const proEnable = auth.hasPermi(`${permCode}:project:enable`)
      const proDisable = auth.hasPermi(`${permCode}:project:disable`)

      const jt = auth.hasPermi(`cqPe:peRecord:${firAss}:jt:query`)
      const jq = auth.hasPermi(`cqPe:peRecord:${firAss}:jq:query`)

      return { add, info, proInfo, proEdit, proEnable, proDisable, jt, jq }
    }
  },
  watch: {
    'queryParams.rdcType'() {
      this.handleQuery()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.peRecordId = this.$route?.params?.peRecordId || ''
      const { firAss, rdcType } = this.$route?.query || {}
      if (!firAss) return

      // 判断检查单位(集团/集群)权限
      const permCode = `cqPe:peRecord:${firAss}`
      const jt = auth.hasPermi(`${permCode}:jt:query`)
      const jq = auth.hasPermi(`${permCode}:jq:query`)
      if (jt && jq) this.queryParams.rdcType = rdcType || RDC_TYPE.DEPT1
      else if (jt) this.queryParams.rdcType = RDC_TYPE.DEPT1
      else if (jq) this.queryParams.rdcType = RDC_TYPE.DEPT2
      else return

      this.queryParams.belongSystem = firAssToBelongSysMap[firAss]
      this.firAss = firAss
      this.getList()
    },
    async getList() {
      const { showBtns, peRecordId } = this
      if (!showBtns.info) return
      if (!peRecordId) return this.$message.error('参数错误：peRecordId 不能为空')

      const opt = { ...this.queryParams, peRecordId }
      this.listLoading = true
      const res = await listPePro(opt).catch(() => false)
      this.listLoading = false
      if (res === false) return

      const data = res.rows || []
      data.map(i => {
        i.isEnableLoading = false
      })
      this.list = data
      this.total = res.total || 0
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    async toggleIsEnablePro(item) {
      if (item.isEnableLoading) return
      const isEnable = item.proIsEnable ? 0 : 1
      const name = isEnable === 1 ? '启用' : '作废'

      const res1 = await this.$prompt('', `${name}原因`, {
        inputPlaceholder: `请输入${name}原因`,
        inputValidator: val => !!(val || '').trim(),
        inputErrorMessage: `请输入${name}原因`
      }).catch(action => ({ action }))
      if (res1.action !== 'confirm') return

      const reason = (res1.value || '').trim()
      const opt = { rltProId: item.rltProId, isEnable, reason }
      const submitApi = isEnable ? enableRltPro : disableRltPro
      item.isEnableLoading = true
      const res = await submitApi(opt).catch(() => false)
      item.isEnableLoading = false
      if (res === false) return

      this.$message.success(`已${name}`)
      this.getList()
    },
    gotoRltChkitem(item) {
      const deptName = [item.deptName1, item.deptName2, item.deptName3, item.curProName].filter(i => i).join(' - ')
      const query = {
        firAss: this.firAss,
        rdcType: this.queryParams.rdcType,
        proIsEnable: item.proIsEnable,
        deptName
      }
      this.$router.push({ path: `/cqPe/peRltChkitem/${item.rltProId}`, query })
    },
    openSelectBusinessType() {
      const { rdcType, belongSystem } = this.queryParams
      this.$refs.SelectBusinessType.open({ rdcType, belongSystem })
    },
    onSelectBusinessType(bsNode) {
      const opt = { ...bsNode, firAss: this.firAss }
      this.$refs.ChkProWizard.init(opt)
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-box {
  /deep/ .el-tabs__item {
    font-size: 12px;
  }
}
</style>
